<script setup>
import { RouterView } from 'vue-router';
import NavBar from './components/NavBar.vue';
</script>

<template>
  <div class="app-container">
    <NavBar />
    <main class="main-content">
      <Transition name="page-transition">
        <RouterView />
      </Transition>
    </main>
  </div>
</template>

<style>
.app-container {
  min-height: 100vh;
}

.main-content {
  padding-top: 70px; /* 为固定导航栏留出空间 */
}

/* 增强页面过渡动画 */
.page-transition-enter-active,
.page-transition-leave-active {
  transition: all 0.7s ease-out;
}

.page-transition-enter-from {
  opacity: 0;
  transform: translateY(6px) scale(0.998);
}

.page-transition-leave-to {
  opacity: 0;
  transform: translateY(-6px) scale(0.998);
}
</style>
